<#-- @ftlvariable name="containerTable" type="java.util.Map<java.lang.Long,com.fable.sp.core.domain.ColumnDef>" -->
<#-- @ftlvariable name="insSupportTypes" type="java.util.Map<java.lang.Long,java.util.List<ColumnType>>" -->
<#-- @ftlvariable name="pInstances" type="com.fable.sp.core.domain.WidgetInstance" -->
<@ui.designerWizard activeStep=3/>
<style>
    td {
        text-align: center !important;
        vertical-align: middle !important;
    }
</style>
<form id="bindingForm">
    <div class="panel panel-info">
        <div class="panel-heading">数据绑定</div>
        <table class="table table-bordered">
            <tr>
                <th class="text-center">组件实例</th>
                <th class="text-center" width="160px">字段名</th>
                <th class="text-center" width="120px">值类型</th>
                <th class="text-center" width="100px">字节数</th>
                <th class="text-center" width="60px">必须</th>
                <th class="text-center" width="60px">索引</th>
            </tr>
        <#list pInstances as ins>
            <#assign fieldTypes = insSupportTypes?api.get(ins.id)/>
            <#if containerTable??>
                <#assign columnDef = containerTable?api.get(ins.id)/>
            </#if>
            <tr data-instance-id="${ins.id}">
                <td class="form-control-static">${ins.displayName}</td>
                <td><input class="form-control validate[required,maxSize[20]]"
                           value="${columnDef???string(columnDef.name,ins.id)}"/></td>
                <#assign columnType = columnDef???string(columnDef.columnType,fieldTypes[0])/>
                <td>
                    <#if fieldTypes?size == 1>
                    ${fieldTypes[0].title}
                        <input type="hidden" value="${columnType}">
                    <#else >
                        <select name="fieldType" class="form-control">
                            <#list fieldTypes as fieldType>
                                <option value="${fieldType.toString()}">${fieldType.title}</option>
                            </#list>
                        </select>
                    </#if>
                </td>
                <#assign defaultLength = (columnType == "STRING")?string("255","16")/>
                <#assign length = columnDef???string(columnDef.length,defaultLength)/>
                <td>
                    <input type="text" class="form-control validate[required,custom[integer]]" value="${length}"/>
                </td>
                <#assign required = columnDef??(columnDef.required?string,false?string)/>
                <td><input type="checkbox" <#if required=="true">checked="checked"</#if>></td>
                <#assign unique = columnDef??(columnDef.unique?string,false?string)/>
                <td>${unique}<input type="checkbox" <#if unique=="true">checked="checked"</#if>></td>
            </tr>
        </#list>
        </table>
    </div>
</form>
<div class="text-center">
    <button type="button" class="btn btn-primary" id="submitAndPublish">保存并发布</button>
</div>
<script>
    $(function () {
        var _form = $('#bindingForm');
        $("#submitAndPublish").click(function () {
            var result = _form.validationEngine('validate');
            if (result) {
                var columnDefs = {};
                var names = [];
                _form.find("tr:not(:first)").each(function () {
                    var _tr = $(this);
                    var _tds = _tr.find("td");
                    var _name = $(_tds.get(1)).find("input").val();
                    if ($.inArray(_name, names) >= 0) {
                        alert("字段名不能相同");
                        return;
                    }
                    names.push(_name);
                    columnDefs[_tr.attr("data-instance-id")] = {
                        "name": $(_tds.get(1)).find("input").val(),
                        "columnType": $(_tds.get(2)).find("input,select").val(),
                        "length": $(_tds.get(3)).find("input").val(),
                        "unique": $(_tds.get(4)).find("input").is(":checked"),
                        "required": $(_tds.get(5)).find("input").is(":checked")
                    };
                });
                $.ajax({
                    url: "<@spring.url relativeUrl='/sp/saveContainerTable'/>?containerId=${containerId}",
                    type: "post",
                    data: JSON.stringify(columnDefs),
                    dataType: "json",
                    contentType: "application/json",
                    processData: false,
                    success: function () {
                        location.href = "<@spring.url relativeUrl='/sp/containers'/>";
                    }
                });
            }
        });
    });
</script>